<template>
  <div class="area-select">
    <div>
      <el-select v-model="selectProvince" value-key="id" filterable @change="selectProvinceFun($event)" no-data-text="无省份数据"
        placeholder="请选择省份" :disabled="disableProvince">
        <el-option value="" label="请选择省份"></el-option>
        <el-option :value="item" :label="item.name" v-for="item in provinceList"></el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="selectCity" value-key="id" filterable @change="selectCityFun($event)" no-data-text="无城市数据"
        placeholder="请选择城市" :disabled="disableCity">
        <el-option value="" label="请选择城市"></el-option>
        <el-option :value="item" :label="item.name" v-for="item in cityList"></el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="selectArea" value-key="id" filterable @change="selectAreaFun($event)" no-data-text="无区县数据"
        placeholder="请选择区县" :disabled="disableArea">
        <el-option value="" label="请选择区县"></el-option>
        <el-option :value="item" :label="item.name" v-for="item in areaList"></el-option>
      </el-select>
    </div>
    <div>
      <el-select v-model="selectStreet" value-key="id" filterable @change="selectStreetFun($event)" no-data-text="无乡镇街道数据"
        placeholder="请选择乡镇街道" :disabled="disableStreet">
        <el-option value="" label="请选择乡镇街道"></el-option>
        <el-option :value="item" :label="item.name" v-for="item in streetList"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
  /* import city from '@/assets/json/city.json' */
  import {
    areasByPcode
  } from "@/api/admin/area";
  export default {
    name: 'area-select',
    data() {
      return {
        provinceList: [],
        cityList: [],
        areaList: [],
        streetList: [],
        selectProvince: {},
        selectCity: {},
        selectArea: {},
        selectStreet: {},
        disableProvince: false,
        disableCity: false,
        disableArea: false,
        disableStreet: false
      }
    },
    created() {
      this.initSelects();
    },
    mounted() {},
    methods: {
      // 初始化
      initSelects() {
        const that = this;
        areasByPcode(0).then(res1 => {
          that.provinceList = res1.data;
          if (that.provinceList[0].is_final == 1) {
            that.disableCity = true;
            that.disableArea = true;
            that.disableStreet = true;
            return;
          }
          areasByPcode(that.provinceList[0].code).then(res2 => {
            that.cityList = res2.data;
            if (that.cityList[0].is_final == 1) {
              that.disableArea = true;
              that.disableStreet = true;
              return;
            }
            areasByPcode(that.cityList[0].code).then(res3 => {
              that.areaList = res3.data;
              if (that.areaList[0].is_final == 1) {
                that.disableStreet = true;
                return;
              }
              areasByPcode(that.areaList[0].code).then(res4 => {
                that.streetList = res4.data;
              })
            })
          })
        });
      },
      // 省份 市 县 街道联动
      selectProvinceFun(event) {
        if (event) {
          this.selectProvince = event || {}
          if (this.selectProvince.is_final == 1) {
            this.disableCity = true;
            this.disableArea = true;
            this.disableStreet = true;
          } else {
            this.disableCity = false;
            this.disableArea = false;
            this.disableStreet = false;
          }
          areasByPcode(event.code).then(res => {
            this.cityList = res.data
          })
        } else {
          this.selectProvince = {}
          this.cityList = []
        }
		this.selectCity = {}
        this.areaList = []
        this.selectArea = {}
        this.streetList = []
        this.selectStreet = {}
        if (event == '') {
          this.$emit('selectArea', -1)
        } else {
          this.$emit('selectArea', event.id)
        }
      },
      selectCityFun(event) {
        if (event) {
          this.selectCity = event || {}
          if (this.selectCity.is_final == 1) {
            this.disableArea = true;
            this.disableStreet = true;
          } else {
            this.disableArea = false;
            this.disableStreet = false;
          }
          areasByPcode(event.code).then(res => {
            this.areaList = res.data
          })
        } else {
          this.selectCity = {}
          this.areaList = []          
        }
		this.selectArea = {}
        this.streetList = []
        this.selectStreet = {}
        if (event == '') {
          let parent = this.selectProvince;
          if (JSON.stringify(parent) == "{}") {
            parent = {
              id: -1
            };
          }
          this.$emit('selectArea', parent.id)
        } else {
          this.$emit('selectArea', event.id)
        }
      },
      selectAreaFun(event) {
        if (event) {
          this.selectArea = event || {}
          if (this.selectArea.is_final == 1) {
            this.disableStreet = true;
          } else {
            this.disableStreet = false;
          }
          areasByPcode(event.code).then(res => {
            this.streetList = res.data
          })
        } else {
          this.selectArea = {}
          this.streetList = []          
        }
		this.selectStreet = {}
        if (event == '') {
          let parent = this.selectCity;
          if (JSON.stringify(parent) == "{}") {
            parent = this.selectProvince;
            if (JSON.stringify(parent) == "{}") {
              parent = {
                id: -1
              };
            }
          }
          this.$emit('selectArea', parent.id)
        } else {
          this.$emit('selectArea', event.id)
        }
      },
      selectStreetFun(event) {
        this.selectStreet = event || {}
        if (event == '') {
          let parent = this.selectArea;
          if (JSON.stringify(parent) == "{}") {
            parent = this.selectCity;
            if (JSON.stringify(parent) == "{}") {
              parent = this.selectProvince;
              if (JSON.stringify(parent) == "{}") {
                parent = {
                  id: -1
                };
              }
            }
          }
          this.$emit('selectArea', parent.id)
        } else {
          this.$emit('selectArea', event.id)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .area-select {
    display: flex;

    div {
      margin-right: 5px;
    }
  }
</style>
